<template>
  <div>
    <p>商品清单如下:</p>
    <div v-for="(item, i) in shopData" :key="i">
      {{ item.shopName }} {{ item.price }}元/份
    </div>
    <p>请选择购买数量:</p>
    <Food
      v-for="(item, i) in shopData"
      :key="`${i + 6}`"
      :name="item.shopName"
      :count="item.count"
      :id="i"
      @add="addFn"
      @minus="minusFn"
    ></Food>
    <p>总价为:{{ totalPrice }}</p>
  </div>
</template>

<script>
import Food from "@/components/practise/Food";
export default {
  data() {
    return {
      // 商品数据
      shopData: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  components: {
    Food,
  },
  methods: {
    addFn(id) {
      this.shopData[id].count++;
    },
    minusFn(id) {
      if (this.shopData[id].count <= 0) {
        return;
      }
      this.shopData[id].count--;
    },
  },
  computed: {
    totalPrice() {
      return this.shopData.reduce(
        (prev, item) => prev + item.price * item.count,
        0
      );
    },
  },
};
</script>